<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/personal.css">
    <style>
        .content ul li {
            border: none;
        }

        .content ul li input[type="text"] {
            width: 122.5px;
            height: 22px;
            margin-right: 6.875px;
            border-radius: 5px;
            border: 1px solid #999;
        }

        .content ul li strong {
            color: #ff3434;
            margin-right: 3.372244%;
        }

        .content ul li #code_span {
            width: 67px;
            margin-right: 0;
        }

        .content ul li #code_txt {
            width: 34.375px;
        }

        .content ul li input[type="button"] {
            width: 58.125px;
            height: 22px;
            background-color: #16dcb8;
            border-radius: 3px;
            border: none;
            color: #fff;
            cursor: pointer;
        }

        .content .photo {
            width: 200px;
            height: 123px;
            float: left;
            border: 2px dashed #57c7f6;
            color: #57c7f6;
            margin-left: 10%;
            margin-top: 22px;
            font: 15px/21px "simhei";
            text-align: center;
            border-radius: 3px;
        }

        .content .photo p {
            width: 111px;
            margin: 44px auto;
        }

        .content #photo_two {
            margin-left: 5%;
        }

        input[type="submit"],
        .return,.file {
            width: 116px;
            height: 37px;
            margin-left: 10%;
            margin-top: 20px;
            font-size: 16px;
            color: #fff;
            background-color: #57c7f6;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            float: left;
        }

        p.file_p {
            width: 300px;
            margin-left: 7px;
            margin-top: 20px;
            float: left;
            font: 12px/18px "simhei";
            color: #ff3434;
        }

        .prompt_strong {
            height: 18px;
            margin-left: 10%;
            margin-top: 21px;
            font: 14px/18px "simhei";
            display: block;
        }

        .prompt_p {
            width: 452.5px;
            margin-left: 10%;
            font: 14px/18px "simhei";

        }

        .prompt_span {
            color: #ff3434;
        }

        .content .verity {
            margin-left: 10%;
            margin-top: 15px;
        }

        .content .verity li {
            height: 42px;
            /* line-height: 42px;
            font-size: 15px; */
        }

        .content .verity li span {
            color: #000;
        }

        select {
            width: 93px;
            height: 23px;
            border-radius: 3px;
            color: #333;
            outline: none;
        }

        #province {
            margin-right: 1.607143%;
        }

        .content .verity li input[type="text"] {
            width: 35.714286%;
        }

        .content .return {
            margin-left: 5%;
            background-color: #ccc;
        }
        @media screen and (min-width: 750px) {
            .content form{
                padding-left: 15%;
            }
        }
        .file{
            position: relative;
            cursor: pointer;
            text-align: center;
            line-height: 37px;
        }
        .file input{
            position: absolute;  
            right: 0;  
            top: 0;  
            opacity: 0;  
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="content_header">
            <strong>修改信息</strong>
        </div>
        <form action="javascript:void(0)">
            <ul>
                <li><span>姓名</span><em>Tony</em></li>
                <li><span>性别</span><em>男</em></li>
                <li><span>证件号码</span><input type="text" id="IDCard"><strong>*必填</strong></li>
                <li><span>手机号码</span><input type="text" id="tel"><strong>*必填</strong>
                    <span id="code_span"">验证码：</span><input type=" text" id="code_txt"><input type="button"
                            value="重新发送">
                </li>
                <li><span>正确姓名</span><input type="text" id="name"><strong>*必填</strong></li>
                <li><span>证件号码</span><input type="text" id="certificate"><strong>*必填</strong></li>
            </ul>
            <div class="clear">
                <div class="photo">
                    <p>手持身份证正面半身露脸照片</p>
                </div>
                <div class="photo" id="photo_two">
                    <p>手持身份证反面半身露脸照片</p>
                </div>
            </div>
            <div class="clear">
                <a href="javascript:void(0)" class="file">选择文件
                    <input type="file" name="" id="">  
                </a>
                <!-- <input type="submit" name="" id="" class="file_submit" value="选择照片"> -->
                <p class="file_p">(注:请上传身份证反面半身露脸照片!图片大小1M以内,图片格式为*.jpg、*.bmp、*.png、*.jpeg)</p>
            </div>

            <strong class="prompt_strong">温馨提示:</strong>
            <p class="prompt_p">1.修改用户姓名、身份证必须上传<span
                    class="prompt_span">手持身份证正反面半身露脸照片。如仅上传身份证正反面照片(非手持)</span>,将审核不通过!</p>
            <p class="prompt_p">1.修改用户姓名、身份证必须上传<span
                    class="prompt_span">手持身份证正反面半身露脸照片。如仅上传身份证正反面照片(非手持)</span>,将审核不通过!</p>
            <p class="prompt_p">1.修改用户姓名、身份证必须上传<span
                    class="prompt_span">手持身份证正反面半身露脸照片。如仅上传身份证正反面照片(非手持)</span>,将审核不通过!</p>
            <p class="prompt_p">1.修改用户姓名、身份证必须上传<span
                    class="prompt_span">手持身份证正反面半身露脸照片。如仅上传身份证正反面照片(非手持)</span>,将审核不通过!</p>
            <p class="prompt_p">1.修改用户姓名、身份证必须上传<span
                    class="prompt_span">手持身份证正反面半身露脸照片。如仅上传身份证正反面照片(非手持)</span>,将审核不通过!</p>
            <p class="prompt_p">1.修改用户姓名、身份证必须上传<span
                    class="prompt_span">手持身份证正反面半身露脸照片。如仅上传身份证正反面照片(非手持)</span>,将审核不通过!</p>
            <ul class="verity">
                <li><span>省市：</span>
                    <select name="" id="province">
                        <option value="">河南省</option>
                    </select>
                    <select name="" id="city">
                        <option value="">郑州市</option>
                    </select>
                </li>
                <li><span>电子邮箱：</span><input type="text" name="" id="">请输入您常用电子邮箱</li>
                <li><span>联系地址：</span><input type="text" name="" id="">请输入您详细地址</li>
                <li><span>验证码：</span><input type="text" name="" id=""></li>
            </ul>
            <input type="submit" value="提交审核" id="submitReva"><input type="button" value="返回" class="return"
                id="return">
        </form>
    </div>
</body>
<script src="../js/json.js"></script>
<script>
    var oSubmitReva = document.getElementById("submitReva");
    var oReturn = document.getElementById("return");
    var oIDCard = document.getElementById("IDCard");
    var oTel = document.getElementById("tel");
    var oCode = document.getElementById("code_txt");
    var oName = document.getElementById("name");
    var oCertificate = document.getElementById("certificate");
    //省市二级联动
    var oProvince = document.getElementById("province");
    var oCity = document.getElementById("city");
    oProvince.innerHTML = "";
    oCity.innerHTML = "";
    for (var i in citydata) {
        var oProSelect = document.createElement("option");
        oProSelect.innerHTML = i;
        oProvince.appendChild(oProSelect);
    }
    var index = oProvince.selectedIndex;
    var oProTxt = oProvince.options[index].text;
    for (var i = 0; i < citydata[oProTxt].length; i++) {
        var oCitySelect = document.createElement("option");
        oCitySelect.innerHTML = citydata[oProTxt][i];
        oCity.appendChild(oCitySelect);
    }
    var cityIndex = oCity.selectedIndex;
    var cityTxt = oCity.options[cityIndex].text;
    oProvince.onchange = function () {
        oCity.innerHTML = "";
        index = oProvince.selectedIndex;
        oProTxt = oProvince.options[index].text;
        for (var i = 0; i < citydata[oProTxt].length; i++) {
            var oCitySelect = document.createElement("option");
            oCitySelect.innerHTML = citydata[oProTxt][i];
            oCity.appendChild(oCitySelect);
        }
        cityTxt = oCity.value;
        oCity.onchange = function () {
            cityIndex = oCity.selectedIndex;
            cityTxt = oCity.options[cityIndex].text;
        }
    }

    oSubmitReva.onclick = function () {
        if (oIDCard.value == "") {
            alert("证件号码不为空");
            return;
        }
        else if (!/^[0-9]{17}[0-9a-zA-Z]$/.test(oIDCard.value)) {
            alert("证件号码错误");
            return;
        }
        else if (oTel.value == "") {
            alert("手机号码不为空");
            return;
        }
        else if (!/^(13|15|16|17|18|19)[0-9]{9}$/.test(oTel.value)) {
            alert("手机号码错误");
            return;
        }
        else if (oCode.value == "") {
            alert("验证码错误");
            return;
        }
        else if (oName.value == "") {
            alert("正确姓名不为空");
            return;
        }
        else if (oCertificate.value == "") {
            alert("证件号码不为空");
            return;
        }
        else {
            window.parent.document.getElementById("ofm").src = "./personal.html";
            window.parent.document.getElementById("content").style.height = '606px';
            window.parent.document.getElementById("content").style.marginTop = '36px';
            localStorage.setItem("userID", oIDCard.value);
            localStorage.setItem("userTel", oTel.value);
            localStorage.setItem("province", oProTxt);
            localStorage.setItem("city", cityTxt);
        }
    }
    oReturn.onclick = function () {
        window.parent.document.getElementById("ofm").src = "./personal.html";
        window.parent.document.getElementById("content").style.height = '606px';
        window.parent.document.getElementById("content").style.marginTop = '36px';
    }
</script>

</html>